<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <script src="../../../plugins/bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js" ></script>
    <script src="../../../plugins/js/request.js"></script>
    <script src="../js/tag/add.js" ></script>
    <script src="../js/type/get.js " ></script>
    <title>Document</title>
</head>
<body>

    <!-- 顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light shadow-lg opacity-75  " >
        <div class="container-sm  ">
          <a class="navbar-brand text-lg" href="#">Blog</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                   <li class="nav-item a">
                      <a class="nav-link active "  aria-current="page" href="blogs.html">  <i class="bi bi-house-door"></i> 博客</a>
                  </li>
                  <li class="nav-item a">
                      <a class="nav-link" href="type.html"><i class="bi bi-lightbulb"></i>分类</a>
                  </li>

                  <li class="nav-item a">
                      <a class="nav-link " href="tags.html"> <i class="bi bi-bookmarks"></i>标签</a>
                  </li>
              </ul>
           <div class="m-magen-tiny a " >
             <a href="#" style="text-decoration:none;" class="denglu-pp">

                 <img src="../image/2003390.jpg" class="rounded-circle imgg-tiny" alt="...">
                <span class="" >45</span>
             </a>
           
           </div>
          </div>
        </div>
      </nav>

      <!-- 中间内容 -->
    <div class="m-container-small con-padding-top"id="tag">

      <div class="input-group mb-3" >
        <span class="input-group-text" id="inputGroup-sizing-default">名称</span>
        <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" placeholder="请输入名称" v-model="tag.name ">
      </div>
      <div class ="text-end">
          <button type="button" class="btn btn-primary" @click="add()">提交</button>
          <button type="button" class="btn btn-secondary" @click="re()">返回</button>
      </div>
    </div>
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="container-fluid f-bg sticky-bottom " style="padding-top: 40px;">
      <div class="row clearfix">
          <div class="col-md-12 column">
              <div class="jumbotron">
                  <div class="container">
                      <center>
  
                          <p>Copyright© 2020 All Rights Reserved. </p>
                          <p>试做</p>
                          地址：航空港校区（主校区） &nbsp;&nbsp;&nbsp; 电话:8956584
                          
                      </center>
  
                  </div>
              </div>
          </div>
      </div>
  </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script>
       new Vue({
           el:"#tag",
           data() {
               return {

                   tag:{
                       name:''
                   },

                   addOrUpdate:'add',

               }
           },
           created(){
               this.id=requestUrlParam('id')


               if(this.id){
                   this.addOrUpdate='update'
                   this.tag.id=this.id
                   this.init()
               }

           },
           methods:{
               //aixos 会返回一个Promise对象
               //async 和 await 基于 promise 的。
               //   使用 async 的函数将会始终返回一个 promise 对象
               //   await 关键字只能放到async 函数里面

               async init() {

                   console.log(this.id)
                   await  getTag(this.id).then(res => {
                       console.log(res.data.data)
                       this.tag.name=res.data.data.name

                   }).catch(err => {
                       alert("cuowu")
                   })
               },


               async add(){
                   if (this.addOrUpdate==='update'){

                       let res =await updateTag(this.tag);
                       if (String(res.data.code) === '1'){
                           alert("更新成功1")
                           window.location.href= 'tag.html'
                       }else{
                           alert(res.data.msg)
                       }
                   }else{

                       let res =await postTag(this.type);
                       if (String(res.data.code) === '1'){
                           alert("保持成功2")
                           window.location.href= 'tag.html'
                       }else{
                           alert(res.data.msg)
                       }
                   }

               },
               re(){
                   window.location.href="../pages/tags.html"
               },

           }

       })

   </script>
</body>
</html>